<template>
  <div class="flex-1 bg-neutral-10 pt-10">
    <div class="w-full h-20 lg:h-17 block"></div>
    <section class="flex-1 pb-50 bg-neutral-10 pt-10">
      <div class="pay">
        <!-- C  订单已关闭
 D  交易已撤销
 P  交易在进行
 F  交易失败
 S  交易成功
 R  转入退款
 W  未支付 -->
        <div v-if="paycode == 'S'">
          <el-icon size="60" color="#d01c1b"><SuccessFilled /></el-icon>
          <div class="infomsg">支付成功</div>
        </div>
        <div v-if="paycode == 'C' || paycode == 'D' || paycode == 'F'">
          <el-icon size="60" color="#F9F9F9"><SuccessFilled /></el-icon>
          <div class="infomsg">交易失败</div>
        </div>
        <!-- <el-icon size="60" color="#d01c1b" v-if="paycode == 'S'"
          ><SuccessFilled
        /></el-icon>
        <el-icon size="60" color="#f4b903" v-if="paycode == ''"
          ><CircleCloseFilled
        /></el-icon> -->

        <div>
          <el-button>
            <router-link to="/">首页</router-link>
          </el-button>
          <el-button class="custom-button">
            <router-link to="/user/order">我的订单</router-link>
          </el-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { userorderStore } from "@/store/orderStore";
const orderStore = userorderStore();
const paycode = ref("");

paycode.value =
  orderStore.$state.paymentcode || (localStorage.getItem("paymentcode") as string);
console.log(paycode);
</script>

<style lang="scss" scoped>
.pay {
  width: 1200px;
  margin: auto;
  padding: 100px 0;
  text-align: center;
  background: #fff;
  .infomsg {
    padding: 10px 40px 40px;
  }
}
</style>
